<style type="text/css">
div#galaxy {
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: url(images/weltall.jpg);
}

div#karte {
    width: 700px;
    height: 700px;
    position: relative;
	background-color:gray;
	white-space:nowrap;
    
}


div#slider {
    width: 5px;
    height: 200px;
    position: relative;
    left: 10px;
    top: 15px;
    z-index: 5000;
}
div#slider a{
	width:12px;
}

</style>
<script type="text/javascript">
    var verbose=3;
    var offsetX=0;
    var offsetY=0;
    var endX;
    var endY;
    var zoom;
    var fieldWidth=20;
	var relativeLeft=0;
	var relativeTop=0;
    var dbY,dbY,dbW=10,dbH=10; //Werte der Datenbank
    var showX, showY; //Aktuelle sicht
    var neutralPoseX, neutralPoseY; //x und y position nach laden der karte
    var mapdata;
    var windowid=0;
    var loading=false;
    $(function(){
        $("#karte").draggable({        
            drag: function(event, ui) { moveMap(event,ui);}
        });
        $("#karte").bind('drag', function (){
               
        });		
        function logMsg(text){
            console.log(text);
        }
        //############################################################################### Mapfunktionen
        function loadMap(x,y){
            if(loading) return false;
            loading=true;
            $.post("ajax.php",{
                mod:"galaxy",
                x:x,
                y:y,
                w:dbW,
                h:dbH
                }
                ,function(xml){
                    mapdata=xml;                   
                    dbX=x;
                    dbY=y;
                    showX=parseInt(x);
                    showY=parseInt(y);
                    if(verbose>0) logMsg("mapdata loaded - showX="+showX+" showY="+showY);
                    drawMap();
                    loading=false;
                }
            );
        }
        function drawMap(){
            //karte neu eintellen
            if(verbose>0) logMsg("draw Map("+dbX+","+dbY+")");
            var galaxyWidth=parseInt($("#galaxy").css("width"));
            var galaxyHeight=parseInt($("#galaxy").css("height"));
            var karteWidth=dbW*fieldWidth;
            var karteHeight=dbH*fieldWidth;
            //abstand zwischen karte und galaxy
            var abstandX=(karteWidth-galaxyWidth)/2;
            //alert("var "+abstandX+"=("+karteWidth+"-"+galaxyWidth+")/2;");
            var abstandY=(karteHeight-galaxyHeight)/2;
            //position ausrechnen und setzten
            neutralPoseX=-abstandX+offsetX;
            neutralPoseY=-abstandY+offsetY;
            $("#karte")
                .css("width", karteWidth)
                .css("height",karteHeight)
                .css("left",neutralPoseX)
                .css("top",neutralPoseY);                
            $('#karte').empty();
            $('planet', mapdata).each(function(i) {
				planetId = $(this).find("id").text();					
                planetX = $(this).find("posx").text();
                planetY = $(this).find("posy").text();
                addPlanet(planetId, planetX, planetY,"test");
            });
            //bind events
            $(".planet").click(function(e){onPlanetClick(e,this);});
            $(".planet").mouseenter(function(e){onPlanetEnter(e,this);});
            $(".planet").mouseleave(function(e){onPlanetLeave(e,this);});
            $('.planet').hover(function(e) {onPlanetHover(e,this);}, function(e) { onPlanetHoverStop(e,this);});

        }
        function moveMap(event, ui){
            //verschiebung berechnen
            schiebX=neutralPoseX-parseInt($("#karte").css("left"));
            schiebY=neutralPoseY-parseInt($("#karte").css("top"));
            showX=Math.round(dbX+(schiebX/fieldWidth));
            showY=Math.round(dbY+(schiebY/fieldWidth));
            offsetX=schiebX%fieldWidth;
            offsetY=schiebY%fieldWidth;
            if(verbose>2) logMsg("map has been moved ("+showX+", "+showY+") Offset: ("+offsetX+","+offsetY+")");
            //check for new load            
            var diffX=schiebX/fieldWidth;
            var diffY=schiebY/fieldWidth;
            if(diffX<0) diffX=diffX*-1;
            if(diffY<0) diffY=diffY*-1;
            
            if(diffX>dbW/4 || diffY>dbH/4){
                if(verbose>0) logMsg("new data needed");
                loadMap(showX, showY);
            }
        }
		function addPlanet(id, x , y, image){
            if(verbose>1) logMsg("add Planet ("+x+","+y+")");
            //verschiebung von x
            x=dbX-x;
            y=dbY-y;
            if(verbose>1) logMsg("pos on map ("+x+","+y+")");
            x=parseInt(x)+Math.round(dbH/2);
            y=parseInt(y)+Math.round(dbH/2);
            if(verbose>2) logMsg("got real position ("+x+","+y+")");
			var left=-relativeLeft+(x*fieldWidth);			
			var top=(y*fieldWidth);			
			$("#karte").append("<img class=\"planet\" style=\"position:relative; top:"+top+"px; left:"+left+"px; width:"+fieldWidth+"px; height:"+fieldWidth+"px; \" planetid=\""+id+"\" src=\"images/planeten/planet0.png\" />");
			relativeLeft+=fieldWidth;
			relativeTop+=fieldWidth;			
		}
        //############################################################################### Planetenfunktionen
        function onPlanetClick(e, object){
            var id=$(object).attr("planetid");            
            alert($("planet[id="+id+"]",mapdata).find("name").text())
        }
        function onPlanetEnter(e){
        }
        function onPlanetLeave(e){
        }
        function onPlanetHover(e,object){
            //load informations
            var id=$(object).attr("planetid");
            var name=$("planet[id="+id+"]",mapdata).find("name").text();
            var posx=$("planet[id="+id+"]",mapdata).find("posx").text();
            var posy=$("planet[id="+id+"]",mapdata).find("posy").text();
            var typ=$("planet[id="+id+"]",mapdata).find("typ").text();            
            var spieler=$("planet[id="+id+"]",mapdata).find("spieler").text();
            var spielername=$("planet[id="+id+"]",mapdata).find("spielername").text();            
            //handle planettypes
            if(typ=="kolonie" && spieler==0){
                var info="Dieser Planet is noch frei";
            }
            else if(typ=="kolonie"){
                var info='Besitzer: '+spielername+'<br>Typ:'+typ;
            }
            else if(typ=="fraktion"){
                var info='Dies ist der Fraktionsplanet der Fraktion';
            }
            else {
                var info='keine zusatzinfo vorhanden';
            }
            
            $('<div id="planettooltip">'+posx+'/'+posy+' - '+name+'<br>'+info+'</div>')
            .css('top', e.pageY + 10)
            .css('left', e.pageX + 10)
            .appendTo('body');
            $('#planettooltip').hide(0);
            $('#planettooltip').hide(2000).fadeIn(600);
        }
        function onPlanetHoverStop(e,object){
            $('#planettooltip').fadeOut(600).remove();
        }
        
        
        //demo
		$("#addbutton").click(function(){
			addImage(prompt("X","0"),prompt("Y","0"),"test");

		});
		$("#addchaos").click(function(){
			for(var i=0; i<100; i++){
				addPlanet(i,i,"test");
			}

		});
		
        //laden des ersten Kartenausschnitts
        loadMap(0,0);
    });//ENDE JQUERY
    
</script>
<input type="button" value="new" id="addbutton" />
<input type="button" value="new" id="addchaos" />

<div id="galaxy">
    <div id="karte">
		
    </div>
</div>